<template>
	<div class="login">
		<el-carousel style="width: 100%; " arrow="never" :loop="true" height="100vh">
			<el-carousel-item>
				<img :src="require('../assets/1.jpg')" alt="" width="100%">
			</el-carousel-item>
			<el-carousel-item>
				<img :src="require('../assets/2.jpg')" alt="" width="100%">
			</el-carousel-item>
			<el-carousel-item>
				<img :src="require('../assets/3.jpg')" alt="" width="100%">
			</el-carousel-item>
			<el-carousel-item>
				<img :src="require('../assets/4.jpg')" alt="" width="100%">
			</el-carousel-item>
		</el-carousel>
		<div class="loginBlock">
			<h3>登录</h3>
			<el-form :model="user" status-icon :rules="rules" ref="ruleForm" label-width="0">
				<el-form-item label="" prop="name">
					<el-input prefix-icon="el-icon-user" placeholder="请输入用户" type="text" v-model="user.name"
						autocomplete="off"></el-input>
				</el-form-item>
				<el-form-item label="" prop="pass">
					<el-input type="password" prefix-icon="el-icon-lock" placeholder="请输入密码" v-model="user.password"
						autocomplete="off"></el-input>
				</el-form-item>
				<el-form-item label="" prop="code">
					<el-input v-model.number="user.code" style="width: 160px;" placeholder="验证码"></el-input>
					<img :src="'http://dida100.com/include/vdimgck.php'" alt="" />
					<span>换一换</span>
				</el-form-item>
				<el-form-item>
					<el-button type="primary" style="width: 100%;" round>提交</el-button>
				</el-form-item>
			</el-form>

		</div>
	</div>
</template>
<script>
	export default {
		data() {
			return {
				user: {
					name: "",
					password: "",
					code: ""
				},
				rules: {
					name: [{
							required: true,
							message: '请输入用户名',
							trigger: 'blur'
						},
						{
							min: 3,
							max: 18,
							message: '长度在 3 到 18 个字符',
							trigger: 'blur'
						}
					],
					password: [{
							required: true,
							message: '请输入密码',
							trigger: 'blur'
						},
						{
							min: 6,
							max: 18,
							message: '长度在 6 到 18 个密码',
							trigger: 'blur'
						}
					],
					code: [{
							required: true,
							message: '请输入验证码',
							trigger: 'blur'
						},
						{
							min:4,						 
							// pattern: /^[a-z]+$/,
							message: '长度4位的验证码',
							trigger: 'blur'
						},

					],
				}
			}
		}
	}
</script>

<style scoped="scoped" lang="scss">
	.login{
		position: relative;
	}

	.loginBlock {
		padding: 20px;
		width: 400px;
		height: 320px;
		position: absolute;
		top: 50%;
		right: 250px;
		transform: translate(0, -50%);
		box-shadow: 0 0 5px #ccc;
		border-radius: 12px;
		background-color: #fff;
		z-index: 500;

		h3 {
			line-height: 48px;
		}
	}
</style>
